<template>
	<view class="main">
		<u-navbar :is-back="true" title="课程" :background="background" :border-bottom="false" title-color="#000000"
			back-icon-color="#000"></u-navbar>
		<view class="all">
			<view class="videoes">
				<view class="covers" v-show="!videomoudle">
					<view class="back">
						<image :src="cover==''?first.cover:cover"></image>
					</view>
					<view class="play" @click="plays">
						<image src="../../../static/images/bofang.png" mode=""></image>
					</view>
				</view>
				<video id="myVideo" style="width: 750rpx; height: 400rpx;" :src="videourl==''?first.video:videourl"
					v-show="videomoudle" enable-danmu page-gesture :controls="true" show-fullscreen-btn show-play-btn
					enable-progress-gesture show-mute-btn :show-center-play-btn="false" @play="play"
					@timeupdate="videoTimeUpdateEvent" @loadedmetadata="loadedmetadata" @click="leave">
					<cover-view class="video-control">
						<cover-view class="multi rate"  @click="showSwitchRate">x {{ currentRate }}</cover-view>
					</cover-view>
					<cover-view class="multi-list rate active" v-if="rateShow">
						<cover-view v-for="(item, index) in bslist" :key="index" class="multi-item rate"
							@click="switchRate(item)" :class=" item == currentRate?'active':''">
							{{ item }}
						</cover-view>
					</cover-view>
				</video>
			</view>
			<view class="content">
				<view class="title">
					{{videotit==''?first.title:videotit}}
				</view>
				<view class="cont_bot">
					<view class="tutor">
						讲师：{{teacher==''?first.lecturer:teacher}}
					</view>
					<view class="topic" @click="router(videoid)">
						测试题目
					</view>
				</view>
			</view>
			<view class="tabs">
				<view class="tab">
					<view :class="ide==1?'tabconted':'tabcont'" @click="changetab(1)">
						<text>目录 ({{info.count}}）</text>
						<view class="xian"></view>
					</view>
					<view class="borl">

					</view>
					<view :class="ide==2?'tabconted':'tabcont'" @click="changetab(2)">
						<text>详情</text>
						<view class="xian"></view>
					</view>
				</view>
			</view>
			<block v-if="ide==1">
				<scroll-view scroll-y="true" style="height: 750rpx;" scroll-with-animation="true"
					:scroll-into-view="'view'+videoindex">
					<view class="contents" v-for="(item,index) in classlist" :key="index"
						@click="changevideo(item,index)" :id="'view'+index">
						<view class="contents_l">
							<view class="video_tit">
								{{item.title}}
							</view>
							<view class="video_cont">
								<text>已学：{{item.percentage==null?'0':item.percentage}}%</text>
								<view>
									测试分数：<text>{{item.fs}}分</text>
								</view>
							</view>
						</view>
						<image src="../../../static/images/start.png" mode=""></image>
					</view>
					<u-modal :id="'view'+videoindex" v-model="run" content="已检测到您已观看过，是否要跳转到您上次观看的位置"
						:show-cancel-button="true" @confirm="runhere">
					</u-modal>
				</scroll-view>
			</block>
			<block v-if="ide==2">
				<view class="details">
					<u-parse :html="content==''?classlist[0].details:content"></u-parse>
				</view>
			</block>

		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#FFFFFF',
				},
				videomoudle: false,
				videotit: '',
				teacher: '',
				videourl: '',
				url: '',
				status: true,
				videoContext: '',
				ide: 1,
				tablist: ['商品信息', '商品属性'],
				videoContext: {}, // 用于绑定视频标签
				classlist: [],
				fatherid: '',
				info: '',
				content: '',
				currentTime: 0,
				videoid: '',
				videowidth: '',
				level: '',
				first: "",
				cover: '',
				run: false,
				videoindex: 0,
				currentRate: 1.0,
				rateShow: false,
				bslist: ['0.5', '1.0', '1.25', '1.5']
			}
		},
		onShow() {
			this.getlevel()
			this.getclass()
		},
		// watch: {
		// 	// watchccalss() {			 },
		// 	videoid: function(val) {
		// 		console.log('视频id', this.videoid);
		// 		uni.setStorageSync('videoid', this.videoid)
		// 	}
		// },

		onLoad(options) {
			// console.log( JSON.parse(decodeURIComponent(options.lesson)));
			this.info = JSON.parse(decodeURIComponent(options.info))
			console.log('信息', this.info.video);
			this.fatherid = options.id
			if (this.info.video != null && this.info.video != 0) {
				this.run = true
			} else {
				this.run = false
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		onUnload() {
			if (this.videoid == '') {
				this.videoid = this.classlist[0].id
			}
			console.log('总长度', this.videowidth);
			console.log('观看长度', this.currentTime);
			if (this.videowidth != 0) {
				global.$http.request({
					url: '/api/home/suspend',
					data: {
						token: uni.getStorageSync('token'),
						id: this.videoid,
						seconds: this.currentTime,
						percentage: this.videowidth,
						key: this.videoindex,
						coid: this.info.id
					}
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 700
						})
					}

				})
			}
		},
		onHide() {
			if (this.videoid == '') {
				this.videoid = this.classlist[0].id
			}
			console.log('总长度', this.videowidth);
			console.log('观看长度', this.currentTime);
			if (this.videowidth != 0) {
				global.$http.request({
					url: '/api/home/suspend',
					data: {
						token: uni.getStorageSync('token'),
						id: this.videoid,
						seconds: this.currentTime,
						percentage: this.videowidth,
						key: this.videoindex,
						coid: this.info.id
					}
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 700
						})
					}

				})
			}
		},
		methods: {
			showSwitchRate(rate) {
				// let that = this;
				console.log('rateShow');
				this.rateShow = true;
			},
			switchRate(e) {
				console.log(e);
				let that = this;
				let rate = Number(e);
				that.currentRate = rate;
				that.rateShow = false;
				this.videoContext.playbackRate(Number(that.currentRate));
			},
			runhere() {
				this.videoindex = this.info.video
			},
			plays() {
				this.videomoudle = true

				var that = this
				setTimeout(function() {
					that.videoContext.play()
				}, 1000)
			},
			leave() {
				if (this.leave.flag == 0) {
					uni.showToast({
						title: '联系管理员开通服务',
						icon: 'none',
						duration: 700
					})
				}
			},
			router(id) {
				// if (this.level.flag == 1) {
				uni.navigateTo({
					url: '../test/test?id=' + id
				})
				// } else {
				// 	uni.showToast({
				// 		title: '请联系管理员开通权限',
				// 		icon: 'none',
				// 		duration: 700
				// 	})
				// }
			},
			//权限
			getlevel() {
				global.$http.request({
					url: '/api/User/info',
					data: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.level = res.data.data[0]
					}
				})
			},
			loadedmetadata(e) { //无效果m
				console.log("loadedmetadata", e.detail.duration)
				this.videowidth = e.detail.duration
			},
			changevideo(info, index) {
				this.videomoudle = false
				console.log(info);
				this.videoid = info.id
				this.videoindex = index
				uni.setStorageSync('videoindex', this.videoindex)
				uni.showLoading({
					title: '加载中'
				});
				var that = this
				setTimeout(function() {
					console.log('更换的头像', info.cover);
					that.videotit = info.title
					that.videourl = info.video
					that.teacher = info.lecturer
					that.content = info.details
					that.cover = info.cover
					uni.hideLoading();
				}, 1000);

			},
			getclass() {
				global.$http.request({
					url: '/api/home/curriculum',
					data: {
						token: uni.getStorageSync('token'),
						id: this.fatherid
					}
				}).then(res => {
					if (res.data.code == 200) {
						// console.log('视频信息',res.data.data);
						this.classlist = res.data.data.data
						this.first = res.data.data.data[0]
						this.videoid = this.classlist[0].id
					}
				})
			},
			videoTimeUpdateEvent(e) { // 播放进度改变
				this.currentTime = Number(e.detail.currentTime);
				this.videowidth = Number(e.detail.duration)
				// console.log('播放进度条改变', e.detail.currentTime)
			},
			play() {
				if (this.currentTime == '') {
					if (this.videoid == '') {
						this.videoid = this.classlist[0].id
					}
					console.log('课程信息', this.classlist);
					for (let i = 0; i < this.classlist.length; i++) {
						if (this.videoid == this.classlist[i].id) {

							if (this.classlist[i].percentage == 100) {
								this.videoContext.seek(0)
							} else {
								this.videoContext.seek(parseInt(this.classlist[i].play))
							}
							console.log('此视频从这里开始');
							break
						}
					}
				} else {
					this.videoContext.seek(parseInt(this.currentTime))
				}

			},

			changetab(index) {
				this.ide = index
				console.log(this.ide);
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 750rpx;
		height: 100%;
		font-family: PingFang SC;
		background-color: #F7F7F7;

		.main {
			.all {
				.videoes {

					.covers {
						position: relative;

						.back {
							image {
								width: 750rpx;
								height: 400rpx;
							}
						}

						.play {
							position: absolute;
							top: 102rpx;
							left: 305rpx;
							z-index: 999;

							image {
								width: 140rpx;
								height: 140rpx;
							}
						}


					}

				}

				.content {
					background-color: #fff;
					padding: 34rpx 31rpx 0 31rpx;

					.title {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #000000;
					}

					.cont_bot {
						padding: 29rpx 0 38rpx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.tutor {
							height: 36rpx;
							padding: 0 17rpx;
							line-height: 36rpx;
							background: #FFFFFF;
							border: 2rpx solid #FF5850;
							border-radius: 6rpx;
							font-size: 22rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FF5850;
						}

						.topic {
							width: 140rpx;
							height: 52rpx;
							background: #11D1A8;
							border-radius: 26rpx;

							font-size: 24rpx;
							font-family: PingFang SC;
							text-align: center;
							line-height: 52rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

				}

				.tabs {
					border-top: 2rpx solid #F7F7F7;
					border-bottom: 2rpx solid #F7F7F7;
					width: 750rpx;
					display: flex;
					align-items: center;
					background-color: #fff;
					height: 88rpx;
					font-size: 30rpx;

					.tab {
						// width: 249rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.tabcont {
							width: 375rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							position: relative;
							color: #999999;

						}

						.tabconted {
							width: 375rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							position: relative;
							color: #000000;

							.xian {
								width: 40rpx;
								height: 4rpx;
								background: #11D1A8;
								position: absolute;
								top: 57rpx;
							}
						}

						.borl {
							width: 2rpx;
							height: 36rpx;
							background: #CCCCCC;
						}
					}
				}

				.contents {
					padding: 39rpx 33rpx;
					display: flex;
					background-color: #fff;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #F7F7F7;

					.contents_l {

						.video_tit {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.video_cont {
							width: 625rpx;
							display: flex;
							justify-content: space-between;
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #9A9A9A;
							padding: 21rpx;

							view {
								text {
									font-size: 22rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #FF0000;
								}
							}
						}

					}

					image {
						width: 52rpx;
						height: 52rpx;
					}
				}

				.details {
					margin-top: 10rpx;
					width: 750rpx;


				}
			}

		}
	}

	/* 以下为视频CSS */
	.course_image {
		width: 100%;
	}

	.video-control {
		// background-color: rgba(0, 0, 0, 0.1);
		height: 90rpx;
		position: absolute;
		top: 0rpx;
		left: 0;
		width: 100%;
		z-index: 999997 !important;
	}

	.video-wrap {
		position: relative;
	}

	.multi-list.full-screen.vertical {
		height: 100vh !important;
		padding: 8vh 0;
	}

	.multi-list.full-screen.horizontal {
		height: 100vw !important;
		padding: 8vw 0;
	}

	.multi {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 998;
		width: 100rpx;
		color: #fff;
		padding: 10rpx 0;
		text-align: center;
		transition: color ease 0.3s;
	}

	.multi.rate {
		right: 30rpx;
		height: 90rpx;
	}

	.multi-list {
		position: absolute;
		height: 100%;
		width: 0;
		background-color: rgba(0, 0, 0, 0.65);
		top: -20rpx;
		right: 0;
		transition: width 0.3s ease;
		z-index: 999;
		box-sizing: border-box;
		padding: 50rpx 0;
	}

	.multi-list.rate {
		padding: 25rpx 0;
	}

	.multi-list.active {
		width: 300rpx;
	}

	.multi-item {
		text-align: center;
		color: #fff;
		line-height: 80rpx;
		transition: color ease 0.3s;
	}

	.multi-item.rate {
		line-height: 70rpx;
	}

	.multi-item:hover,
	.multi:hover {
		color: #00d8ff;
	}

	.multi-item.active {
		color: #00d8ff;
	}

	/* 视频CSS结束 */
</style>
